<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位样式</title>
    <link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>
</head>
<body>
<fieldset><legend>定位样式：Position</legend>
<p>　定位样式是布局中最重要的样式</p>
    <div class="redb">　　position</div>
    <ul>
        <li>static：静态定位(默认)</li>
        <li>absolute：绝对定位</li>
        <li>relative：相对定位</li>
        <li>fixed：视框定位</li>
    </ul>
    <hr/>
    <div><span class="redb">　absolute</span>：绝对定位</div>
    <div>　　一旦设定了绝对定位，便脱离了文档流；借以辅助坐标来显示位置，文档流位置没有真正的偏移</div><br/>
    <div class="f-w">　代码示例</div>
    <pre>
        &lt;div style="width: 500px;height: 200px;border: 1px solid gray;<span class="red">position: absolute;top:460px;left: 10px;</span>"&gt;
        &lt;div style="width: 500px;height: 30px;border: 1px solid gray"&gt;1&lt;/div&gt;
        &lt;div style="width: 500px;height: 30px;border: 1px solid gray;<span class="red">position: absolute;top:20px;left: 20px;</span>"&gt;2&lt;/div&gt;
        &lt;div style="width: 500px;height: 30px;border: 1px solid gray"&gt;3&lt;/div&gt;
        &lt;/div&gt;
    </pre>
    <div class="f-w">　代码效果</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div style="width: 500px;height: 200px;border: 1px solid gray;position: absolute;top:460px;left: 10px;">
        <div style="width: 500px;height: 30px;border: 1px solid gray">1</div>
        <div style="width: 500px;height: 30px;border: 1px solid gray;position: absolute;top:20px;left: 20px;">2</div>
        <div style="width: 500px;height: 30px;border: 1px solid gray">3</div>
    </div>
    <div class="redb">　补充：</div>
    <div>　　写定位的时候，无论是绝对定位还是相对定位，都需要有参照物，一般来说，都会找它的父级作为参照物，直到找到absolute和relative</div>
    <div>　　当父级没有参照物时，会继续往上级找参照物，所以，如果要准确定位，必须先给需要定位的对象设定参照物</div>
    <hr/>
    <div><span class="redb">　relative</span>：相对定位</div>
    <div>　　相对定位没有脱离文档流，可以借以辅助坐标来显示位置，辅助坐标出现的偏移位置会出现滚动条</div>
    <div>　　还可以借助边距来显示位置，偏移后不会出现滚动条，文档流的位置真正的往下走了</div><br/>
    <div class="f-w">　代码示例</div>
    <pre>
        &lt;div style="width: 500px;height: 200px;border: 1px solid gray;<span class="red">position: absolute;top:460px;left: 10px;</span>"&gt;
        &lt;div style="width: 500px;height: 30px;border: 1px solid gray"&gt;1&lt;/div&gt;
        &lt;div style="width: 500px;height: 30px;border: 1px solid gray;<span class="red">position: relative;top:20px;left: 20px;</span>"&gt;2&lt;/div&gt;
        &lt;div style="width: 500px;height: 30px;border: 1px solid gray"&gt;3&lt;/div&gt;
        &lt;/div&gt;
    </pre>
    <div class="f-w">　代码效果</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div style="width: 500px;height: 200px;border: 1px solid gray;position: absolute;top:1020px;left: 10px;">
        <div style="width: 500px;height: 30px;border: 1px solid gray">1</div>
        <div style="width: 500px;height: 30px;border: 1px solid gray;position:relative;top:20px;left: 20px;">2</div>
        <div style="width: 500px;height: 30px;border: 1px solid gray">3</div>
    </div>
    <hr/>
    <div><span class="redb">　relative</span>：相对定位</div>
    <div>　　视框定位不会随页面的滚动而滚动</div>
    <div class="f-w">　代码示例</div>
    <pre>
        &lt;div style="width:300px;height:20px; background-color: antiquewhite;<span class="red">position: fixed;top:5px;right:20px;</span>"&gt;　
         你好！欢迎光临！我的名字叫视框定位~~&lt;/div&gt;
    </pre>
    <div class="f-w">　代码效果：（右上角）</div>
    <div style="width:300px;height:20px; background-color: antiquewhite;position: fixed;top:5px;right:20px;">　你好！欢迎光临！我的名字叫视框定位~~</div>

</fieldset>
</body>
</html>